<template>
  <bi-page class="page-risk-list" :enable-bottom="false">
    <bi-page-layout-grid>
<!--      <div class="page-risk-list__toolbar" slot="toolbar">-->
<!--        <div class="page-risk-list__toolbar-left">-->
<!--          <span class="page-risk-list__total">总计：{{total}}人</span>-->
<!--        </div>-->
<!--        <div class="page-risk-list__toolbar-right">-->
<!--          <bi-county-select-->
<!--            v-if="false"-->
<!--            :value="currentCounty"-->
<!--            type="picker"-->
<!--            :data="selectCountyData"-->
<!--            @change="handleCountyChange"-->
<!--          ></bi-county-select>-->
<!--        </div>-->
<!--      </div>-->
      <bi-data-list
        ref="dataList"
        :query-method="handleQueryMethod"
      >
        <template slot-scope="{ data }">
          <bi-people-isolation-card
            v-for="(item, index) in data"
            :key="index"
            :data="item"
          ></bi-people-isolation-card>
        </template>
      </bi-data-list>
    </bi-page-layout-grid>
  </bi-page>
</template>

<script>
import BiPage from 'board/common/page'
import { BiPageLayoutGrid } from 'board/common/page-layout'
import BiPeopleIsolationCard from 'board/common/people-isolation-card'
import BiDataList from 'board/common/data-list'
import { BiToolbar, BiToolbarItem } from 'board/common/toolbar'
import BiCountySelect from 'board/common/county-select'
import { staticPersonInfo, loadSymptomData, loadDiseaseData, loadPsychicData, loadPeopleByHotel } from './index.js'
import { mapState } from 'vuex';
import { getNavList } from '../gl-bulletinBoard/api/bulletinboard.js'

let documentTitle = ''
export default {
  name: 'RiskList',
  components: {
    BiPage,
    BiDataList,
    BiCountySelect,
    BiToolbar,
    BiToolbarItem,
    BiPageLayoutGrid,
    BiPeopleIsolationCard
  },
  data () {
    return {
      total: 0,
      currentCounty: '',
      countyData: []
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user.user
    }),
    urlParams () {
      return this.$route.query
    },
    dataType () {
      return this.$route.query.dataType
    },
    title () {
      let title = '人员详情'
      if (this.$route.query.title) {
        title = `人员详情(${this.$route.query.title})`
      }
      return title
    },
    selectCountyData () {
      return [{
        label: '全部区',
        value: ''
      }].concat(this.countyData)
    }
  },
  created () {
    this.zzIds = this.$route.query.zzIds
    getNavList().then(rs => {
      this.countyData = rs.data.data || []
    })
  },
  mounted () {
    documentTitle = window.document.title
    window.document.title = this.title
  },
  methods: {
    handleCountyChange (evt) {
      this.currentCounty = evt.value
      this.$refs.dataList.reload()
    },
    handleQueryMethod (filters) {
      const pageInfo = Object.assign({}, filters, {
        zzIds: this.zzIds
      })
      let result
      if (this.$route.query.sourceType === 'symptomChart') {
        result = loadSymptomData(this.dataType, pageInfo)
      } else if (this.$route.query.sourceType === 'diseaseChart') {
        result = loadDiseaseData(this.dataType, pageInfo)
      } else if (this.$route.query.sourceType === 'psychicChart') {
        result = loadPsychicData(this.dataType, pageInfo)
      } else if (this.urlParams.hotelId) {
        result = loadPeopleByHotel(this.urlParams.hotelId, this.dataType, pageInfo)
      } else {
        result = staticPersonInfo(this.dataType, pageInfo)
      }
      return result.then((rs) => {
        this.total = rs.data.data.total
        return {
          total: this.total,
          records: rs.data.data.records
        }
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    window.document.title = documentTitle
    next()
  }
}
</script>

<style lang="scss">
.page-risk-list__toolbar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.page-risk-list__total{
  font-size: 17px;
}
</style>
